<template>
  <div class="container">
    <div class="box-cont">
      <div class="box-page top"></div>
      <div class="box-page bottom"></div>
      <div class="box-page left"></div>
      <div class="box-page right"></div>
      <div class="box-page before"></div>
      <div class="box-page after"></div>
    </div>
  </div>
</template>

<script type="text/javascript">
var arr = document.querySelectorAll(".box-page");
//需要去遍历六个面中的每一个面
for (var n = 0; n < arr.length; n++) {
  //外层循环遍历行
  for (var r = 0; r < 3; r++) {
    //内层循环遍历列
    for (var c = 0; c < 3; c++) {
      //创建元素
      var divs = document.createElement("div");
      divs.style.cssText =
        "width: 100px;height: 100px;border: 2px solid #fff;box-sizing: border-box;background-color: red;position: absolute;background-image: url(../assets/img/a" +
        n +
        ".jpg);background-size: 300px 300px;";
      arr[n].appendChild(divs);

      divs.style.left = c * 100 + "px";
      divs.style.top = r * 100 + "px";

      divs.style.backgroundPositionX = -c * 100 + "px";
      divs.style.backgroundPositionY = -r * 100 + "px";
    }
  }
}
</script>

<style>
.container {
  width: 200px;
  height: 200px;
  /* border: 1px solid #000; */
  margin: 150px auto;
  perspective: 20000px;
}
.box-cont {
  width: 200px;
  height: 200px;
  /* 控制子元素保持3D转换 */
  transform-style: preserve-3d;

  /* 测试代码 */
  /* transform: rotateX(45deg) rotateY(45deg); */
  animation: ro 4s linear infinite;
  background: skyblue;
}
@keyframes ro {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.box-page {
  width: 200px;
  height: 200px;
  /* 位置初始化 */
  position: absolute;
  transform-style: preserve-3d;
  background: skyblue;
}
.top {
  background-color: red;
  transform: translateZ(150px);
}
.bottom {
  transform: translateZ(-150px);
}
.left {
  background-color: orange;
  transform: translateX(-150px) rotateY(-90deg);
}
.right {
  background-color: pink;
  transform: translateX(150px) rotateY(90deg);
}
.before {
  background-color: blue;
  transform: translateY(150px) rotateX(-90deg);
}
.after {
  background-color: yellow;
  transform: translateY(-150px) rotateX(90deg);
}

/* 调用图片引用动画 */
.box-page div:nth-child(1) {
  animation: a1 4.5s ease-in;
}
.box-page div:nth-child(2) {
  animation: a1 4.5s ease-in 0.5s;
}
.box-page div:nth-child(3) {
  animation: a1 4.5s ease-in 1s;
}
.box-page div:nth-child(4) {
  animation: a1 4.5s ease-in 1.5s;
}
.box-page div:nth-child(5) {
  animation: a1 4.5s ease-in 2s;
}
.box-page div:nth-child(6) {
  animation: a1 4.5s ease-in 2.5s;
}
.box-page div:nth-child(7) {
  animation: a1 4.5s ease-in 3s;
}
.box-page div:nth-child(8) {
  animation: a1 4.5s ease-in 3.5s;
}
.box-page div:nth-child(9) {
  animation: a1 4.5s ease-in 4s;
}
@keyframes a1 {
  0% {
    transform: translateZ(0px) scale(1) rotateZ(0deg);
  }
  20% {
    transform: translateZ(300px) scale(0) rotateZ(720deg);
  }
  80% {
    transform: translateZ(300px) scale(0) rotateZ(720deg);
  }
  100% {
    transform: translateZ(0px) scale(1) rotateZ(0deg);
  }
}
</style>
